<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="../../../common/common-jstl.jspf" %>
<%@ include file="../../../common/common-js.jspf" %>
<!DOCTYPE html>
<html>
<head>
    <base href="${pageContext.request.contextPath }/" target="main"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .container {
            width: 100%;
            height: 300px;
        }

        .title {
            width: 100%;
            height: 12%;
            background-color: #5E5E5E;
        }

        .title > span {
            color: white;
            font-size: 16px;
            font-family: "黑体";
            line-height: 32px;
            text-indent: 1em;
            display: block;
        }

        .content {
            width: 100%;
            height: 88%;
            background-color: #F5F5F5;
        }

        .content table {
            border-collapse: collapse;
            width: 100%;
        }

        .content table td, .content table th {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="title"><span>新增教师信息</span></div>
    <div class="content">
        <form id="form" action="" method="post">
            <table>
                <tr>
                    <th>教师名称:</th>
                    <td><input type="text" name="teaName"/></td>
                </tr>
                <tr>
                    <th>账号:</th>
                    <td><input type="text" name="account"/></td>
                </tr>
                <tr>
                    <th>密码:</th>
                    <td><input type="text" name="password"/></td>
                </tr>
                <tr>
                    <th>角色名称:</th>
                    <td>
                        <select name="roleId">
                            <option value="-1">--请选择--</option>
                            <c:forEach items="${roleList }" var="role">
                                <option value="${role.roleId }" ${role.roleName=="教师"?"selected='selected'":"" }>${role.roleName }</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="4"><input type="button" onclick="submitData();" value="添加"/></td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">
    //使用ajax提交表单数据
    function submitData() {
        //bookName=..&bookAuthor=..
        var paramter = $("#form").serialize();

        $.ajax({
            dataType: "text",
            //对网页数据转码
            data: encodeURI(paramter),
            url: "teacherInfoController?flag=add",
            type: "post",
            success: function (data) {
                if (data == "ok") {
                    layer.msg("添加成功");
                    layer.open({
                        type: 2,
                        title: false,
                        shadeClose: false,
                        shade: 0.5,
                        skin: 'layui-layer-rim',

                        area: ['1100px', '400px'],
                        content: "teacherInfoController?flag=list"
                    });

                } else {
                    layer.msg("添加失败");
                    layer.open({
                        type: 2,
                        title: false,
                        shadeClose: false,
                        shade: 0.5,
                        skin: 'layui-layer-rim',

                        area: ['1100px', '400px'],
                        content: "teacherInfoController?flag=initAdd"
                    });

                }
            }

        });
    }
</script>
</body>
</html>